<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棋局回放</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_history.css">
</head>
<body>
    <script src="js/jquery.min.js"></script>
    <div class="nav">
        <div class="tips"></div>
    </div>
    <div class="container">
        <div >
            <div class="board">
                <canvas id="chess" width="450px" height="450px">

                </canvas>
                <div class="row">
                    <div class="next" onclick="nextStep()">下一步</div>
                    <div class="back" onclick="backHall()">回到大厅</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        let step = 0;
        let historyArray = [];

        $.ajax({
            type: "get",
            url: "/chess/history" + location.search,
            success: function(result) {
                if(result != null && result.code === 200 && result.data != null) {
                    let chessHistory = result.data;
                    historyArray = JSON.parse(chessHistory.history);
                    console.log(historyArray);
                    let userId1 = chessHistory.userId1;
                    let username1 = chessHistory.username1;
                    let userId2 = chessHistory.userId2;
                    let username2 = chessHistory.username2;
                    let blackUserId = chessHistory.blackUserId;
                    let winnerId = chessHistory.winnerId;
                    let finalTitle = userId1 === blackUserId ? username1 : username2;
                    finalTitle += blackUserId === winnerId ? " 先胜 " : " 先负 ";
                    finalTitle += userId1 === blackUserId ? username2 : username1;
                    $(".nav .tips").text(finalTitle);
                }
            },
            error: function() {
                console.log("[ajax] /chess/history");
            }
        });

        initGame();
        function initGame() {
            let chess = document.querySelector('#chess');
            let context = chess.getContext('2d');
            context.strokeStyle = "#adadad";
            // 背景图片
            let logo = new Image();
            logo.src = "pic/board.jpg";
            logo.onload = function () {
                context.drawImage(logo, 0, 0, 450, 450);
                for (let i = 0; i < 15; i++) {
                    context.moveTo(15 + i * 30, 15);
                    context.lineTo(15 + i * 30, 435);
                    context.stroke();
                    context.moveTo(15, 15 + i * 30);
                    context.lineTo(435, 15 + i * 30);
                    context.stroke();
                }
            }
        }

        function nextStep() {
            if(step >= historyArray.length) {
                return;
            }
            let point = historyArray[step];
            computerPut(point.row, point.col, step++ % 2 === 0);
        }

        function computerPut(j, i, isBlack) {
            let chess = document.querySelector('#chess');
            let context = chess.getContext('2d');
            context.beginPath();
            context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
            context.closePath();
            var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
            if (isBlack) {
                gradient.addColorStop(0, "#0A0A0A");
                gradient.addColorStop(1, "#636766");
            } else {
                gradient.addColorStop(0, "#D1D1D1");
                gradient.addColorStop(1, "#F9F9F9");
            }
            context.fillStyle = gradient;
            context.fill();
        }

        function backHall() {
            location.href = "/game_hall.html";
        }
    </script>
</body>
</html>